<template>
    <div class="scroll-wrapper">
        <div class="fixed" :style="'position:'+fixed">
            <div class="scroll" ref="scroll" @mousewheel.prevent>
                <div class="scroll-left" ref="scrollLeft"></div>
            </div>
        </div>
        <div class="scroll-height" ref="height"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            fixed: "fixed",
            tabRefs: {}
        };
    },
    methods: {
        scrollShow(table) {
            this.tabRefs = table;
            this.$refs.scroll.addEventListener(
                "mousewheel",
                this.scrollleft,
                false
            );
            this.$refs.scroll.addEventListener(
                "scroll",
                this.scrollClick,
                false
            );
            window.addEventListener("scroll", this.handleScroll);
            setTimeout(() => {
                this.scrollSyle();
            }, 500);
            window.onresize = () => {
                return (() => {
                    this.scrollSyle();
                })();
            };
        },
        handleScroll() {
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            // console.log( document.documentElement.clientHeight + scrollTop - 85 > this.tabRefs.$el.offsetTop)
            if (scrollTop > this.tabRefs.$el.offsetTop +50) {
                this.tabRefs.$refs.hiddenColumns.style.cssText =
                    "height:" +
                    this.tabRefs.$refs.headerWrapper.offsetHeight +
                    "px;position:relative";
                this.tabRefs.$refs.headerWrapper.style.cssText =
                    "position: fixed;top: 0; z-index: 99; width:" +
                    this.tabRefs.$el.offsetWidth +
                    "px";
            } else {
                this.tabRefs.$refs.hiddenColumns.style.cssText = "";
                this.tabRefs.$refs.headerWrapper.style.position = "static";
            }
        },
        scrollleft(event) {
            var detail = event.wheelDelta || event.detail;
            var moveForwardStep = 1;
            var moveBackStep = -1;
            var step = 0;
            if (detail > 0) {
                step = moveForwardStep * 50;
            } else {
                step = moveBackStep * 50;
            }
            this.$refs.scroll.scrollLeft += step;
            this.tabRefs.$refs.bodyWrapper.scrollLeft = this.$refs.scroll.scrollLeft;
        },
        scrollClick() {
            this.tabRefs.$refs.bodyWrapper.scrollLeft = this.$refs.scroll.scrollLeft;
        },
        scrollSyle() {
            let $refs = this.$refs;
            $refs.scrollLeft.style.width = this.tabRefs.bodyWidth;
            this.tabRefs.$refs.bodyWrapper.style.overflow = "hidden";
            if (
                $refs.scrollLeft.offsetWidth - 20 <
                this.tabRefs.$el.offsetWidth
            ) {
                this.fixed = "static";
            } else {
                this.fixed = "fixed";
            }
            $refs.scroll.style.width = this.tabRefs.$el.offsetWidth + "px";
            this.tabRefs.$refs.headerWrapper.style.width =
                this.tabRefs.$el.offsetWidth + "px";
            //判断是否有rightFixedWrapper
            if (this.tabRefs.$refs.rightFixedWrapper) {
                this.tabRefs.$refs.rightFixedWrapper.classList.add(
                    "el-table-fixed-right-wrap"
                );
            }
        }
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
        window.onresize = null;
    }
};
</script>
<style lang="stylus" scoped>
.scroll-wrapper {
    overflow hidden
    .fixed {
        position: fixed;
        bottom: 0;
        z-index: 99;
    }

    .scroll {
        overflow-x: auto;
        height: 25px;
        width: 100%;

        .scroll-left {
            height: 10px;
        }
    }

    .scroll-height {
        height: 25px;
    }
}
</style>
<style lang="stylus">
.el-table-fixed-right-wrap {
    height: auto !important;
    bottom: 0;
}
</style>